<template>
  <view class="rescue-dialog" @click="closed">
    <view class="rescue-dialog-content" @click.stop="">
      <view class="lineBox" @click="closed">
        <view class="line"></view>
      </view>
      <view class="header">
        <view class="rescue-dialog-content-title">配件属性测量说明</view>
        <view class="subTitle">
          <view
            @click="chooseSub(v, i)"
            :class="['subTitleItem',i==active ? 'active' : '']"
            v-for="(v, i) in titleList"
            :key="i"
            >{{ v.name }}</view
          >
        </view>
      </view>

      <scroll-view
        scroll-y="true"
        :scroll-into-view="targetElement"
        @scroll="onScroll"
        style="height:calc(96vh - 144px);"
      >
      <view>
     
        <view class="rescue-dialog-content-list">
          <view
            class="card-content"
            v-for="(item, index) in list"
            :key="index"
            :id="`box-${index}`"
          >
            <view :class="['name',item.name==titleList[active].name?'active':'']">{{ item.name }}</view>
            <view v-for="(e, j) in item.imgs" :key="j" class="imgBox">
              <image :src="e.url" mode="" />
            </view>
          </view>
        </view>
      </view>
      </scroll-view>
      <view class="bottom" @click="closed">
        <view>我知道了</view>
      </view>
    </view>
  </view>
</template>
<script>
// import elevator from '@/pages/index/components/elevator.vue';
export default {
	// components: { elevator },
	props: {
		list: {
			type: Array,
			default: () => {
				return [
					{
						id: '1818527023798456321',
						name: '机车属性',
						imgs: [
							{
								url: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250506/ab668b7258139c7e690ee362fac9df0e.png',
							},
						],
					},
					{
						id: '1821721222769352705',
						name: '热华',
						imgs: [
							{
								url: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250506/540727ac68e4195428a72812ca7bf3f8.png',
							},
						],
					},
					{
						id: '1818527023798456326',
						name: '机车属性2',
						imgs: [
							{
								url: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250506/ab668b7258139c7e690ee362fac9df0e.png',
							},
						],
					},
					{
						id: '1818527023798456327',
						name: '机车属性4',
						imgs: [
							{
								url: 'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20250506/ab668b7258139c7e690ee362fac9df0e.png',
							},
						],
					},
				];
			},
		},
	},
	data() {
		return {
			active: '',
			targetElement: '',
			toView: '',
			currentScrollTop: 0,
			
		};
	},
	created() {},
	computed: {
		titleList() {
			return this.list.map((item) => {
				return { name: item.name, id: item.id };
			});
		},
	},
	methods: {
		scrollToView(id) {
			this.toView = id;
			console.log(this.toView, 'this.toView');
		},
		onScroll() {
			console.log('滚动位置:');
		},
		chooseSub(v, i) {
			this.active = i;
			this.targetElement = 'box-' + i;
			console.log(this.targetElement, 'this.targetElement');
		},
		closed() {
			this.$emit('closed');
		},
		setActive(id) {
			// console.log(id,this.titleList,'看看id的值');
			this.active = '';
			this.targetElement = '';
			let index = this.list.findIndex(item=>item.id === id);
			console.log(index,id,this.list,'看看索引');
			this.active = index;
			uni.showToast({
				duration: 500,
				icon: 'none',
				mask: true,
				title:'加载中'
			});
			setTimeout(()=>{
				this.targetElement = 'box-' + index;
			},500);
		
			// console.log(this.targetElement);
		}
	},
};
</script>

<style lang="scss" scoped>
.test {
  view {
    height: 300rpx;
  }
}
.rescue-dialog {
  width: 100%;
  height: 96vh;
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  // box-shadow: 0rpx -4rpx 12rpx 0px rgba(0, 0, 0, 0.1181)
  // position: fixed;
  // left: 0;
  // top: 0;
  // background-color: rgba(0, 0, 0, 0.17);
  // z-index: 301;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-direction: column;
}

.rescue-dialog-content {
  background-color: #fff;
  border-radius: 8rpx 8rpx 0 0;
  width: 100%;
  // width: 650rpx;
  // padding: 0 40rpx;
  box-sizing: border-box;
  // margin: 0 auto;
  // margin-top: -3vh;
  // margin-bottom: 1vh;
  overflow-x: hidden;
  // position: relative;

  &-title {
    height: 68rpx;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    // justify-content: center;
    text-align: center;
    position: sticky;
    top: 0px;
  }
  .subTitle {
    border-bottom: 2rpx solid #eee;
    padding: 0 40rpx;
    display: flex;
    .subTitleItem {
      margin-right: 16rpx;
      height: 66rpx;
      // height: 100%;
      display: flex;
      align-items: center;
    }
    .active{
      border-bottom: 4rpx solid #0091ff;
      color: #0091ff;
      margin-bottom: -2rpx;
    }
  }
  .name {
    height: 60rpx;
    display: flex;
    align-items: center;
  }
  .active{
    color: #0091ff;
  }
  .imgBox {
    margin-bottom: 18rpx;
    image {
      width: 100%;
    }
  }

  &-list {
    width: 100%;
  }

  .card-content {
    // margin: 0 20rpx;
    padding: 0 40rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 8rpx;
    position: relative;
    // border-top: 2rpx solid #eee;
    overflow-x: hidden;
    image {
      width: 100%;
    }
  }
  .lineBox {
    display: flex;
    justify-content: center;
    .line {
      margin: 20rpx 0;
      border-radius: 5rpx;
      background: #d8d8d8;
      width: 64rpx;
      height: 10rpx;
    }
  }

  .bottom {
    border-top: 2rpx solid #eeeeee;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    view {
      margin: 16rpx 40rpx 24rpx 40rpx;
      border-radius: 8rpx;
      height: 68rpx;
      background: #0091ff;
      color: #fff;
      justify-content: center;
      align-items: center;
      display: flex;
    }
  }
}

.close-btn {
  width: 66rpx;
  margin: 10rpx auto;
}
</style>
